<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		div.wrapper {
			width: 400px; height: 200px;
			border: 1px dashed #666;
		}
		div.test {
			width: 100px; height: 100px;
		}
		div.bor {
			border: 1px dashed #666;
		}
	</style>
	<body>
		<div class="wrapper">
			<div class="test" style="background: red;">
				
			</div>
			<div class="test" style="background: green;">
				
			</div>
			<div class="test" style="background: blue;">
				
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br>
		<div class="wrapper">
			<div class="test" style="background: red; float: left">
				左浮动
			</div>
			<div class="test" style="background: green;">
				不浮动
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			利用浮动，我们可以将两个div放置再一行
		</p>
		<div class="wrapper">
			<div class="test" style="background: red; float: right">
				右浮动
			</div>
			<div class="test" style="background: green;">
				不浮动
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			利用浮动，我们可以将两个div放置再一行
		</p>
		<div class="wrapper">
			<div class="test" style="background: red; float: left">
				左浮动
			</div>
			<div class="test" style="background: green; float: left">
				左浮动
			</div>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			如果都设置了右浮动，要注意顺序问题
		</p>
		<div class="wrapper">
			<div class="test" style="background: red; float: right">
				右浮动
			</div>
			<div class="test" style="background: green; float: right">
				右浮动
			</div>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			如果第一个元素不浮动，第二元素左浮动
		</p>
		<div class="wrapper">
			<div class="test" style="background: red;">
				不浮动
			</div>
			<div class="test" style="background: green; float: left">
				左浮动
			</div>
		</div>
		
		
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			文字环绕
		</p>
		<div class="wrapper">
			<div class="test" style="background: red; float: left;">
				浮动
			</div>
			<div class="test" style="width:100%; height: 100%; background: green;">
				文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
				
				
				文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
				文字环绕文字环绕文字环绕
			</div>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			文字环绕 文字默认遇到边界不折行，<br>
			使用word-break: keep-all; 保持现状<br>
			使用word-break: break-all; 遇到边界折行，不保留文字中换行效果<br>
			使用word-break: break-word; 遇到边界折行，保留文字中换行效果<br>
		</p>
		<div class="wrapper">
			<div class="test" style="background: red; float: left;">
				浮动
			</div>
			<div class="test" style="width:100%; height: 100%; background: green;">
				wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword
				wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword
				wordwordwordwordwordword
			</div>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		<p>
			浮动元素无法撑开父元素的高度，会导致父元素高度塌陷
		</p>
		<div class="bor">
			<div class="test" style="background: red; float: left;">
				浮动
			</div>
			<div class="test" style="background: green; float: left; clear: left;">
				浮动
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br>
		
		<p>
			给父元素style= overflow：auto;
		</p>
		<div class="bor" style="overflow: auto;">
			<div class="test" style="background: red; float: left;">
				浮动
			</div>
			<div class="test" style="background: green; float: left;">
				浮动
			</div>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		
		<p>
			ul li 的浮动
		</p>
		<style type="text/css">
			.bor ul {
				list-style: none;
			}
			.bor ul li {
				float: left;
				border: solid 1px #0000FF;
			}
		</style>
		<div class="bor" style="overflow: hidden;">
			<ul>
				<li style="float: left;">aaaaaa</li>
				<li style="float: right; clear: both;">bbbbb</li>
				<li style="float: left; clear: both;">cccccc</li>
				<li style="float: right; clear: both;">dddddd</li>
			</ul>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		
		<p>
			ul li 的浮动
		</p>
		<style type="text/css">
			.bor ul {
				list-style: none;
			}
			.bor ul li {
				float: left;
				border: solid 1px #0000FF;
			}
		</style>
		<div class="bor" style="overflow: hidden;">
			<ul>
				<li style="float: left;">aaaaaa</li>
				<div style="clear: both;"></div>
				<li style="float: right;">bbbbb</li>
				<div style="clear: both;"></div>
				<li style="float: left;">cccccc</li>
				<div style="clear: both;"></div>
				<li style="float: right;">dddddd</li>
			</ul>
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		
		<p>
			ul li 的浮动
		</p>
		<style type="text/css">
			.bor2 ul {
				list-style: none; 
			}
			.bor2 ul li {
				/*float: left;*/
				width: 300px; height: 50px;
				border: solid 1px #0000FF;
			}
		</style>
		<div class="bor2">
			<ul>
				<li style="float: left;">aaaaaa</li>
				<li>bbbbb</li>
				<li>cccccc</li>
				<li>dddddd</li>
			</ul>
		</div>
		
	</body>
</html>